<template>
  <homePanel ref="target" title="新鲜好物"  subTitle="新鲜出炉 品质靠谱">
    <template #rightMore>
    
    <!-- 公共组件 查看更多-->
      <xtxMore>查看更多</xtxMore>
    </template>
    <template #default>
          <ul>
            <li v-for="(item, index) in newList" :key="index">
              <!-- <img :src="item.picture" alt=""> -->
              <img v-lazyImg="item.picture"  alt="">
              <h2>{{item.name}}</h2>
              <p>￥{{item.price}}</p>
            </li>
          </ul>
    </template>
  </homePanel>
</template>
<script>
import  homePanel  from  './home-panel'
import {reqFindNew}  from  '@/api/home'
import { ref } from 'vue'
// import { useIntersectionObserver } from '@vueuse/core'
import {useObserver}  from  '@/compositions'
export default {
  components:{
    homePanel
  },
  setup(){
    const newList=ref([])
    const getNewList=async ()=>{
      const  res=await  reqFindNew()
      //console.log(res,75);
      newList.value=res.result
    }
    /* 懒加载 */
    // const target = ref(null)
    // const { stop } = useIntersectionObserver(
    //   target,
    //   ([{ isIntersecting }], observerElement) => {
    //     console.log(isIntersecting,5555);
    //     if(isIntersecting){
    //       stop() //  终止监听
    //       getNewList()
    //     }
    //   },
    // )
    const target=useObserver(getNewList)
    return {newList,target}
  }
}
</script>
